<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="http://wx.shixuewen.com/h5/css/aui.2.0.css"/>
    <style>
        #scrollBox {
            position: absolute;
            z-index: 10;
            left: 0;
            right: 0;
            width: 100%;
        }

        #scroll {
            overflow: hidden;
            margin-top: -1px;
        }

        #scrollBox p {
            height: 24px;
            line-height: 24px;
            background: #ffffff;
            border-top: 1px solid #ccc;
        }

        video {
            object-position: 0px 0px;
            width: 100%;
        }

        #videoBox {
            position: relative;
        }


        #poster {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 100;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #playBtn,#pauseBtn{
            position: fixed;
            bottom: 0;
            left:0;
        }
        #pauseBtn{
            left: 100px;
        }
    </style>
</head>
<body>
<div id="videoBox">
    <input id="playBtn" type="button" value="开始">
    <input id="pauseBtn" type="button" value="暂停">
    <!--<video id="videoBox" controls preload="auto" poster="images/tempPoster.jpg" x5-video-player-type="h5" x5-video-player-fullscreen="true">-->
    <video id="videoLive" preload="auto" poster=""  x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true">
        <!--<source src="http://221.208.196.19:8080/hls/stream1.m3u8" type="application/x-mpegURL">-->
        <source src="http://img.ksbbs.com/asset/Mon_1605/25d705200a4eab4.mp4">
    </video>
</div>
<script>
    var iWindowWidth;
    var iWindowHeight;
    window.onresize = function () {
        autoWH();
        myPlayer.style.width = iWindowWidth + "px";
        myPlayer.style.height = iWindowHeight + "px";
    }
    //获取videojs生成的video
    var myPlayer = document.getElementById("videoLive");
    //播放按钮
    var oPlayBtn = document.getElementById("playBtn");
    //获取视频盒子
    var oVideoBox = document.getElementById("videoBox");
    window.addEventListener('touchmove', function (e) {
     e.preventDefault();
     }, false);
    function autoWH() {
        //获取可视区宽度
        iWindowWidth = window.innerWidth;
        //获取可视区高度
        iWindowHeight = window.innerHeight;
        
        myPlayer.style.width = iWindowHeight + "px";
        myPlayer.style.height = iWindowWidth + "px";
    }

    //播放按钮呗点击
    oPlayBtn.onclick = function () {
        myPlayer.play();
    }
    pauseBtn.onclick = function(){
        myPlayer.pause();
    }
    //监听播放
    myPlayer.addEventListener('play', function () {
        alert("播放");
        autoWH();
    }, false);
    //监听暂停
    myPlayer.addEventListener('pause', function () {
        alert("暂停");
        myPlayer.style.width = iWindowWidth + "px";
        myPlayer.style.height = iWindowHeight + "px";
    }, false);
    //监听结束
    myPlayer.addEventListener('ended', function () {
        alert("结束");
    }, false);
</script>
</body>
</html>